<script setup>
import { ref, onMounted, watch } from 'vue';
import { useUseStore } from '@/stores/user';
import { getTraditionList, cancelTraditionAPI } from '@/server/api/userInfo';
import { showFailToast, showNotify, showSuccessToast } from 'vant';
import router from '@/router';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const url = useUseStore().ing;
const useStore = useUseStore();
//点击Pi 还是点击 eCNY
const marker = ref(1);
const serachData = ref({
    typeId: marker.value,
    page: 1,
    limit: 20,
    piName: useStore.userInfo.piName
})
const loading = ref(false);
const finished = ref(false);
const List = ref([]);

const onLoad = () => {
    myTranList()
};
//拼路径
const imgUrl = (ImgList) => {
    for (var i = 0; i < ImgList.length; i++) {
        ImgList[i].userImage = url + ImgList[i].userImage;
    }
}
//获取发布的交易列表
const myTranList = async () => {
    serachData.value.typeId = marker.value;
    const res = await getTraditionList(serachData.value);
    List.value.push(...res.data.data);
    serachData.value.page += 1;
    loading.value = false
    if (res.data.data.length < serachData.value.limit) {
        finished.value = true;
    }
}
//判断picName是否为空
watch(() => marker.value, (newValue, oleValue) => {
    if (newValue != oleValue) {
        List.value = [];
        loading.value = false
        serachData.value.page = 1;
        finished.value = false;
    }
})
//取消交易
const cancelTradition = async (tradinId, publisherUid) => {
    const res = await cancelTraditionAPI(tradinId, publisherUid);
    if (res.data.code == 200) {
        showSuccessToast('');
        List.value = List.value.filter(item => !(item.tradinId === tradinId && item.publisherUid === publisherUid));
    } else {
        showFailToast('');
    }
}
onMounted(() => {
    // 
    showNotify({
        message: '这里将会展示未被下单以及未取消的交易',
        color: '#fff',
        background: '#ffc300',
        duration: 4000
    });
})

</script>

<template>
    <div class="MyTransactions">
        <div class="top">
            <ExchangeOrderTop :title="$t('exchangeTitle')" />
            <!-- <ExchangeOrderTop :title="$t('exchange.order')" /> -->
        </div>
        <div class="tabs">
            <div class="tab">
                <div @click="marker = 0" :class="[
                    'item',
                    marker == 0 ? 'con' : '']">
                    Pi
                </div>
                <div @click="marker = 1" :class="[
                    'item',
                    marker == 1 ? 'con' : '']">
                    eCNY
                </div>
                <div @click="marker = 2" :class="[
                    'item',
                    marker == 2 ? 'con' : '']">
                    Currency
                </div>

            </div>
        </div>
        <van-list class="contnet-list" :finished-text="$t('shop.shopList.finish')" v-model:loading="loading"
            :finished="finished" @load="onLoad" offset="0">
            <div class="content">
                <div class="showList" v-for="item in List" :key="item.tradinId">
                    <div class="head">
                        <img :src="`${item.userImage}`"> {{ item.userName }}
                        <span>
                            {{ item.typeId == 0 ? $t("exchange.needECNY") : $t("exchange.needPi") }}
                        </span>
                    </div>
                    <div class="mainBody" v-if="marker === 1">
                        <div class="item">eCNY{{ item.pointBalance }}</div>
                        <div class="img"><img src="/images/Me/兑换.png" /></div>
                        <div class="item">Pi{{ item.piBalance }}</div>
                    </div>
                    <div class="mainBody" v-if="marker === 0">
                        <div class="item">Pi{{ item.piBalance }}</div>
                        <div class="img"><img src="/images/Me/兑换.png" /></div>
                        <div class="item">eCNY{{ item.pointBalance }}</div>
                    </div>

                    <div class="mainBody" v-if="marker === 2">
                        <div class="item">eCNY{{ item.pointBalance }}</div>
                        <div class="img"><img src="/images/Me/兑换.png" /></div>
                        <div class="item">Currency{{ item.piBalance }}</div>
                    </div>
                    <div class="btn" @click="cancelTradition(item.tradinId, item.userName)">取消</div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<style scoped lang="scss">
.MyTransactions {
    min-height: 100vh;
    max-height: 100vh;

    overflow-y: scroll;

    &::-webkit-scrollbar {
        display: none;
    }

    >.contnet-list {
        >.content {
            padding: 24rem 16rem;
            position: relative;

            >.showList {
                border-radius: 16rem;
                box-shadow: 0rem 5rem 10rem -3rem rgba(143, 143, 143, 0.3);
                height: 100rem;
                margin-bottom: 10rem;
                padding: 10px 10px;

                .head {
                    display: flex;
                    font-size: 15rem;
                    line-height: 25rem;

                    img {
                        width: 30rem;
                        height: 30rem;
                        padding-top: 5rem;
                    }

                    span {
                        font-size: 18rem;
                        position: absolute;
                        right: 20px;
                        padding-top: 5rem;
                    }
                }

                >.btn {
                    font-size: 14rem;
                    font-weight: 500;
                    line-height: 20rem;
                    color: #fff;
                    margin-left: 250px;

                    width: 110rem;
                    height: 28rem;
                    text-align: center;

                    background: #642e8e;
                    padding: 4rem 4rem;

                    border-radius: 6rem;

                    box-sizing: border-box;
                }

            }
        }

        .mainBody {
            display: flex;
            justify-content: center;
            margin-top: 10rem;

            .img {
                margin: auto;

                img {
                    width: 30rem;
                    height: 30rem;
                }
            }

            .item {
                font-size: 18rem;
                font-weight: 500;
                line-height: 28rem;
                color: #333;
            }
        }

        // .items {
        //     padding: 12rem;
        //     margin-bottom: 8rem;
        //     box-shadow: 0rem 5rem 10rem -3rem rgba(143, 143, 143, 0.3);
        //     border-radius: 16rem;

        //     >.top {

        //         >.user {
        //             display: flex;
        //             align-items: center;

        //             >img {
        //                 width: 24rem;
        //                 height: 24rem;
        //                 margin-right: 8rem;
        //             }

        //             >.name {
        //                 font-size: 14rem;
        //                 font-weight: 400;
        //                 line-height: 20rem;
        //                 color: #666;
        //             }
        //         }

        //         >.type {
        //             font-size: 16rem;
        //             font-weight: 400;
        //             line-height: 22rem;
        //             color: #333;
        //         }
        //     }


        //     >.center {
        //         position: relative;

        //         display: flex;
        //         justify-content: space-between;
        //         align-items: center;
        //         margin-bottom: 10rem;

        //         &.reverse {
        //             flex-direction: row-reverse;
        //         }

        //         >.item {
        //             font-size: 20rem;
        //             font-weight: 500;
        //             line-height: 28rem;
        //             color: #333;
        //         }

        //         >.img {
        //             width: max-content;
        //             position: absolute;
        //             left: 0;
        //             right: 0;
        //             margin: 0 auto;

        //             font-size: 12rem;

        //             display: flex;
        //             align-items: center;

        //             >img {
        //                 width: 20rem;
        //                 margin-right: 4rem;
        //             }
        //         }
        //     }
        // }
    }

    >.tabs {
        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-bottom: 16rem;

        >.tab {
            display: flex;
            align-items: center;

            .item {
                font-size: 14rem;
                font-weight: 400;
                line-height: 20rem;
                color: #666;

                padding: 4rem 16rem;
                background: #e6e6e6;

                border-radius: 16rem;

                //   &:nth-of-type(1) {
                //     margin-right: 16rem;

                //     &.is_rtl {
                //       margin-right: 0rem;
                //       margin-left: 16rem;
                //     }
                //   }

                &.con {
                    background: #ffc300;
                    color: #fff;
                }
            }
        }
    }
}
</style>